<template>
    <div>

        <!-- 头部导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>


        <!-- 卡片试图区 -->
        <el-card >
            
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" 
                    v-model="queryInfo.query" clearable
                    @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search"
                            @click="getUserList"
                        ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button 
                        type="primary"
                        @click="addDialogVisible = true"
                    >
                        添加用户
                    </el-button>
                </el-col>
            </el-row>

            <!-- 用户列表区 -->
            <el-table :data="userlist" style="width:100%"
                border stripe
            >
                <el-table-column  type="index" label="#">
                </el-table-column>

                <el-table-column
                    prop="username"
                    label="姓名"
                    width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="电话"
                    width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="role_name"
                    label="角色"
                    width="180px"
                >
                </el-table-column>

                <el-table-column
                    label="状态"
                    width="180px"
                >
                <!-- slot-scope="scope" 可以拿到当前行的数据 -->
                    <template slot-scope="scope">
                        <!-- 拿到当前行的数据 -->
                        <!-- {{scope.row.mg_state}} -->
                        <!-- v-model:绑定的是布尔类型的变量,这里绑定的是后台传过来的数据 -->
                        <el-switch
                            v-model="scope.row.mg_state"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="userStateChanged(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    width="180px"
                >
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button 
                            size="mini"
                            type="primary" 
                            icon="el-icon-edit" 
                            @click="showEditDialog(scope.row.id) "
                        >
                        </el-button>

                        <!-- 删除按钮 -->
                        <el-button 
                            size="mini"
                            type="danger" 
                            icon="el-icon-delete" 
                            @click="removeUserById(scope.row.id)"
                        >
                        </el-button>

                        <!-- 分配角色按钮 tooltip:文字组件-->
                        <el-tooltip  effect="dark" content="分配角色" 
                            placement="top" :enterable="false">
                            <el-button 
                                size="mini"
                                type="waring" 
                                icon="el-icon-setting" 
                                @click="setRole(scope.row)"
                            >
                            </el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>

            <!-- 页码区 -->
            <!-- 
                页面刷新,默认显示的是2条数据
                size-change：每页显示条数改变触发的事件
                current-change:页码改变触发的事件
                current-page: 当前页数
                page-sizes：每页显示个数选择器的选项设置
                page-size：每页显示条目个数
                layout：组件布局，子组件名用逗号分隔
                total：总条目数
             -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">                                               
            </el-pagination>


            <!-- 添加用户的对话框 -->
            <!-- title：弹出对话框的标题 -->
            <!-- visible：控制对话框显示隐藏 -->
            <el-dialog
                title="添加用户"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClosed"
                >

                <!-- 内容主体区域 -->
                <el-form 
                    :model="addForm" 
                    :rules="addFormRules" 
                    ref="addFormRef" label-width="70px" 
                >
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="addForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="addForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="addForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="addForm.mobile"></el-input>
                    </el-form-item>
                </el-form>

                <!-- 底部按钮区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUser ">确 定</el-button>
                </span>
            </el-dialog>


            <!-- 修改用户的对话框 -->
            <!-- visible：控制对话框显示隐藏 -->
            <el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="ediDialogClosed"
            >

                <!-- 内容主体区域 -->
                <el-form 
                    :model="editForm" 
                    :rules="editFormRules" 
                    ref="editFormRef" 
                    label-width="70px" 
                >
                    <el-form-item label="用户名" >
                        <el-input 
                            v-model="this.editForm.username" 
                            disabled
                        >
                        </el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="editForm.email">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="editForm.mobile">

                        </el-input>
                    </el-form-item>
                </el-form>

                <!-- 底部按钮区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUserInfo ">确 定</el-button>
                </span>
            </el-dialog>


            <!-- 分配角色对话框 -->
            <el-dialog
                title="分配角色"
                :visible.sync="setRoleDialogVisible"
                width="50%"
                @close="setRoleDialogClose"
            >
                <div>
                    <p>当前的用户：{{userInfo.username}}</p>
                    <p>当前的角色：{{userInfo.role_name}}</p>
                    <p>分配新角色：
                        <!-- v-model的值为当前被选中的el-option的 value 属性值 -->
                        <!-- 这里的value我们绑定的是id -->
                        <!-- label:展示给用户看的数据 -->
                        <el-select v-model="selectedRoleId" placeholder="请选择">
                            <el-option
                                v-for="item in rolesList"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </p>
                </div>   


                <span slot="footer" class="dialog-footer">
                    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveRoleInfo()">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>


    </div>
</template>

<script>
    export default {

        data() {

            //验证邮箱的规则(柠檬的18的login.vue也有演示)
            var checkEmail = (rule,value,cb)=>{
                // 验证邮箱的正则表达式
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

                if(regEmail.test(value) ){
                    //合法的邮箱
                    return cb();
                }

                cb(new Error("请输入合法的邮箱"))

            }

            //验证手机的规则
            var checkMobile = (rule,value,cb)=>{
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

                if(regMobile.test(value) ){
                    return cb();
                }

                cb(new Error("请输入合法的手机号"));

            }



            return {
                
                //获取用户列表的参数对象
                queryInfo:{
                    query:"",  //查询参数
                    pagenum:1, //当前页数
                    pagesize:2,//每页显示条数
                    
                },

                //获取到的用户列表
                userlist:[],

                //总条数
                total:0,

                // 控制添加用户对话框的显示和隐藏
                addDialogVisible:false, 

                //添加用户的表单数据
                addForm:{
                    username:"",
                    password:"",
                    email:"",
                    mobile:"",
                },


                //修改用户的对话框的显示和隐藏
                editDialogVisible:false,

                //点击修改按钮查询到的用户信息
                editForm:{},
                    
                

                //控制分配角色对话框的显示和隐藏
                setRoleDialogVisible:false,

                //需要被分配角色的用户信息
                userInfo:{},

                //所有角色的数据列表
                rolesList:[],


                //已选中的角色id值 
                selectedRoleId:"",


                


                //添加表单的验证规则
                addFormRules:{
                    username:[
                        {
                            required:true,
                            message: '请输入用户名',
                            trigger:'blur'
                        },
                        { 
                            min: 3, max: 5, 
                            message: '长度在 3 到 5 个字符',
                            trigger: 'blur' 
                        }
                    ],
                    password:[
                        {
                            required:true,
                            message:"请输入密码",
                            trigger: 'blur' 
                        },
                    ],
                    email:[
                        {
                            required:true,
                            message:"请输入邮箱",
                            trigger: 'blur' 
                        },
                        {
                            validator:checkEmail,
                            trigger: 'blur' 
                        },
                    ],
                    mobile:[
                        {
                            required:true,
                            message:"请输入手机号",
                            trigger: 'blur' 
                        },
                        {
                            validator:checkMobile,
                            trigger: 'blur' 
                        },
                    ],



                },

                //修改表单的验证规则
                editFormRules:{
                    email:[
                        {
                            required:true,
                            message:"请输入用户邮箱",
                            trigger: 'blur' 
                        },
                        {
                            validator:checkEmail,
                            trigger: 'blur' 
                        },
                    ],
                    mobile:[
                        {
                            required:true,
                            message:"请输入用户手机号",
                            trigger: 'blur' 
                        },
                        {
                            validator:checkMobile,
                            trigger: 'blur' 
                        },
                    ],

                },

                

            }
        },


        //组件创建之后
        created() {
            //组件创建完成之后通过后台获取到用户的数据
            this.getUserList();
        },

        methods: {
            //获取用户信息
            async getUserList(){
                //$http:是main定义好的ajax
                const {data:res} =  await this.$http.get("users",{params:this.queryInfo});

                //res:后台接口返回的数据
                // console.log(res);

                if(res.meta.status !== 200){
                    return this.$message.error("获取用户信息失败")
                }

                this.userlist = res.data.users;
                this.total = res.data.total;
                // console.log(this.total);
                
            },

            //监听pageSize改变的事件(每页显示条数)
            handleSizeChange(newSize){
                // console.log(newSize);
                this.queryInfo.pagesize = newSize;
                //当每页显示条数改变后从新调用后台方法显示数据
                this.getUserList();
            },

            //监听页码值改变的事件(页码)
            handleCurrentChange(newPage){
                // console.log(newPage);//改变后的值
                this.queryInfo.pagenum = newPage;
                this.getUserList();
            },

            //监听switch开关状态
            async userStateChanged(userinfo){
                // console.log(userinfo);//当前行的数据 
                const {data:res} = await this.$http.put(`users/${userinfo.id}}/state/${userinfo.mg_state}`)

                if(res.meta.status !== 200){

                    //当点击后，浏览器的状态已经修改了,由于在后台修改失败,所以要把浏览器
                    //  状态重置回来
                    userinfo.mg_state = !userinfo.mg_state;
                    return this.$message.error("更新用户状态失败");
                }

                this.$message.success("更新用户状态成功");


            },


            //监听添加用户对话框的关闭 事件
            addDialogClosed(){
                this.$refs.addFormRef.resetFields();
            },


            //点击对话框"确定"按钮,添加用户
            addUser(){
                this.$refs.addFormRef.validate(async valid =>{
                    // console.log(valid);//true或false


                    if(!valid ){
                        return ;
                    }

                    //信息正确的,访问添加用户接口
                    const {data:res} =  await this.$http.post("users",this.addForm);

                    if(res.meta.status !== 201){
                        this.$message.error("添加用户失败");
                    }

                    this.$message.success("添加用户成功");


                    //隐藏对话框
                    this.addDialogVisible = false;
                    //刷新用户列表
                    this.getUserList();



                })
            },

            //修改用户
            async showEditDialog(id){
                
                // alert(id);

                //先查询出老数据
                const {data:res} = await this.$http.get("users/"+id);
                if(res.meta.status !== 200){
                    return this.$message.error("获取用户数据失败");
                }

                
                // console.log(res);

                this.editForm = res.data;//把查询到的信息用对象接收
                this.editDialogVisible = true;


            },

            //修改用户的重置操作(修改对话框取消后重置数据)
            ediDialogClosed(){
                this.$refs.editFormRef.resetFields();
            },


            //修改用户信息并提交
            editUserInfo(){
                this.$refs.editFormRef.validate(async valid =>{
                    // console.log(valid,res);
                    if(!valid)return;

                    const {data:res} = await this.$http.put("users/"+this.editForm.id,{
                        email:this.editForm.email,
                        mobile:this.editForm.mobile
                    });

                    // console.log(res);

                    if(res.meta.status !==200){
                        return this.$message.error("用户信息修改失败")
                    }

                    //关闭对话框
                    this.editDialogVisible = false;

                    //刷新数据列表
                    this.getUserList();

                    //提示修改成功
                    this.$message.success("用户信息修改成功");

                })
                
            },


            //根据Id删除对应的用户
            async removeUserById(id){
                // console.log(id);
                const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', 
                    {confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'}).catch(err =>{
                        return err;
                })
                //如果用户点击确定,输出confirm，点取消输出:cancel
                // console.log(confirmResult);  
                
                if(confirmResult !== "confirm"){
                    return this.$message.info("已经取消删除");
                }

                const {data:res} = await this.$http.delete("users/"+id);
                // console.log(res);
                if(res.meta.status !== 200){
                    
                    this.$message.error("删除用户失败");
                }
                   
                this.$message.success("删除用户成功");
                this.getUserList();
                

            },


            //展示分配角色的对话框
            //userInfo ：传的scope.row
            async setRole(userInfo){
                this.setRoleDialogVisible = true;
                // console.log(userInfo);

                //获取用户角色列表
                const {data:res} = await  this.$http.get("roles");

                if(res.meta.status !== 200){
                    return this.$message.error("获取角色列表失败");
                }

                // console.log(res);

                this.rolesList = res.data;

                this.userInfo = userInfo;
            },

            //点击按钮分配角色
            async saveRoleInfo(){

                // console.log(this.selectedRoleId);
                if(!this.selectedRoleId){
                    return this.$message.error("请选择要分配的角色");
                }

                //userInfo:是点击分配角色按钮通过scope.row就获取到的行数据
                const {data:res} = await  this.$http.put(`users/${this.userInfo.id}/role`,{
                    rid:this.selectedRoleId
                });
                // console.log(res);
                
                if(res.meta.status !== 200){
                    return this.$message.error("获取角色列表失败");
                }
                this.$message.success("获取角色列表成功");
                this.getUserList();
                this.setRoleDialogVisible = false;
            },

            //监听分配角色关闭事件
            setRoleDialogClose(){
                this.selectedRoleId ="";
                this.userInfo ={};
            },

            


        },
        
    }


 /* 
 功能1：保存switch状态
    1. 添加switch自带的change事件,传递当前行参数
    2. 调用后台接口更改状态

功能2：搜索
    1. 绑定v-model
    2. 添加点击事件调用getUserList

功能3 :搜索清空，展示全部数据
    1. 添加clearable
    2. 添加clear事件调用getUserList函数

功能4：添加用户
    1. 使用dialog + form组件
    2. 点击添加用户，addDialogVisible为true显示对话框
    3. 自定义验证规则
     3.1 用一个变量接收自定义规则,
     3.2 把接收规则的变量绑定到rules里面

功能55：关闭对话框重置form数据
    1. 给form添加close事件(addDialogClosed)
    2. 调用表单自定义的函数重置表单内容

 */   
</script>

<style lang="stylus" scoped>

</style>